<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动的小盒子</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div:nth-of-type(1){
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0px;
        top: 0px;
        margin-bottom: 20px;
    
    }
      div:nth-of-type(2){
        width: 100px;
        height: 100px;
        background-color: rgb(54, 193, 16);
        position: absolute;
        left: 0px;
        top: 130px;
        margin-bottom: 50px;
    
    }
      div:nth-of-type(3){
        width: 100px;
        height: 100px;
        background-color: rgba(207, 243, 3, 0.857);
        position: absolute;
        left: 0px;
        top: 260px;
        margin-bottom: 70px;
    
    }
      div:nth-of-type(4){
        width: 100px;
        height: 100px;
        background-color: rgb(6, 54, 27);
        position: absolute;
        left: 0px;
        top: 390px;
        margin-bottom: 90px;
    
    }
      div:nth-of-type(5){
        width: 100px;
        height: 100px;
        background-color: rgb(90, 4, 218);
       position: absolute;
        left: 0px;
        top: 520px;
        margin-bottom: 110px;
    
    }
    div:nth-of-type(6){
        width: 100px;
        height: 100px;
        background-color: rgba(11, 11, 11, 0.743);
        position: absolute;
        left: 0px;
        top: 650px;
        margin-bottom: 150px;
    
    }
 
   

    button{
        position: relative;
        top:100px;
    }
</style>
<body>
        <div id="div"></div>
        <button>点击开始</button>
        <button>点击停止</button>
        <div id="div"></div>
        <div id="div"></div>
        <div id="div"></div>
        <div id="div"></div>
        <div id="div"></div>
        <div id="div"></div>
        
        <!-- <div id="div"></div>
        <button>点击开始</button>
        <button>点击停止</button>

        <div id="div"></div>
        <button>点击开始</button>
        <button>点击停止</button> -->
</body>
<script>
    let hezi = document.getElementsByTagName('div');
    let begin = document.getElementsByTagName('button');
    let body = document.body;
    let  num1 = 0;
    let  num2 = 0;
    let  num3 = 0;
    let  num4 = 0;
    let  num5 = 0;
    let  num6 = 0;
    let timer = null;
    let randomnum1 = Math.random()*(25-10)+10;
    let randomnum2 = Math.random()*(60-10)+10;
    let randomnum3 = Math.random()*(20-10)+10;
    let randomnum4 = Math.random()*(30-10)+10;
    let randomnum5 = Math.random()*(40-10)+10;
    let randomnum6 = Math.random()*(50-10)+10;
    
         begin[0].onclick = function(){
            let speed1 = randomnum1;
            let speed2 = randomnum2;
            let speed3 = randomnum3;
            let speed4 = randomnum4;
            let speed5 = randomnum5;
            let speed6 = randomnum6;
            if(timer == null){
       timer = setInterval(() => {
            num1 += speed1;
            num2 += speed2;
            num3 += speed3;
            num4 += speed4;
            num5 += speed5;
            num6 += speed6;
            hezi[0].style.left = num1 +'px';
            hezi[0].style.top = num1 +'px';
             if(num1 >= body.offsetWidth || num2<0){
            speed1 = -speed1;
        }
        //      if(num1 >= body.offsetHeight - hezi[0].offsetHeight || num1<0){
        //     speed1 = -speed1;
        // }
         hezi[1].style.left = num2 +'px';
         hezi[1].style.top =  130 - num2 +'px';

             if(num2 >= body.offsetWidth - hezi[1].offsetWidth || num2<0){
            speed2 = -speed2;
        }
        // if(num2 >= body.offsetHeight - hezi[1].offsetHeight || num2<0){
        //     speed2 = -speed2;
        // }
         hezi[2].style.left = num3 +'px';
         hezi[2].style.top = -num3 + 260 +'px';
             if(num3 >= body.offsetWidth - hezi[2].offsetWidth || num3<0){
            speed3 = -speed3;
        }
        // if(num2 >= body.offsetHeight - hezi[2].offsetHeight || num3<0){
        //     speed3 = -speed3;
        // }
         hezi[3].style.left = num4 +'px';
         hezi[3].style.top = -num4  + 390 +'px';
             if(num4 >= body.offsetWidth - hezi[3].offsetWidth || num4<0){
            speed4 = -speed4;
        }
        // if(num4 >= body.offsetHeight - hezi[3].offsetHeight || num4<0){
        //     speed4 = -speed4;
        // }
         hezi[4].style.left = num5 +'px';
         hezi[4].style.top = -num5  + 520 +'px';
             if(num5 >= body.offsetWidth - hezi[4].offsetWidth || num5<0){
            speed5 = -speed5;
        }
        // if(num5 >= body.offsetHeight - hezi[4].offsetHeight || num5<0){
        //     speed5 = -speed5;
        // }
         hezi[5].style.left = num6 +'px';
         hezi[5].style.top = num6 + 650 +'px';
             if(num6 >= body.offsetWidth - hezi[5].offsetWidth || num6<0){
            speed6 = -speed6;
        }
        // if(num6 >= body.offsetHeight - hezi[5].offsetHeight || num6<0){
        //     speed6 = -speed6;
        // }
        
        }, 50);
    }
    }

    begin[1].onclick = function(){
        clearInterval(timer);
        timer = null;
    }
   
</script>
</html>